<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#outer{
				margin-top: 400px;
				width: 300px;
				background-color: greenyellow;
				margin: 0 auto;
				text-align: center;
			}
			#outer img{
				margin-left: 20px;
			}
			
		</style>
	</head>
	<body>
		<div id="outer">
			<p id="deo"></p>
			<img src="../images/con1.jpg" />
			<button type="button" id="prev"><上一张</button>
			<button type="button" id="next">下一张></button>
		</div>
		<script type="text/javascript">
			/* 点击按钮切换图片 */
			var bu1 = document.getElementById("prev");
			var bu2 = document.getElementById("next");
			var img = document.getElementsByTagName("img")[0];
			var imgArr = ["../images/con1.jpg","../images/con2.jpg","../images/con3.jpg"
			,"../images/con4.jpg"]
			var index = 0 ;
			prev.onclick = function(){
					index--;
					if(index == -1){
						index = imgArr.length - 1;
					}
					img.src = imgArr[index];
					document.getElementById("deo").innerHTML = "一共 4 张图片 当前第 "+(index+1 )+"张";
			}
			next.onclick = function(){
				palytime();
			}
			function palytime(){
				index++;
					if(index == imgArr.length){
						index = 0 ;
					}
					img.src = imgArr[index];	
					document.getElementById("deo").innerHTML = "一共 4 张图片 当前第 "+(index +1)+"张";
				
			}
			
			/* 设置定时器 */
			var timer = null ;
			function times(){
				 timer = setInterval(function(){
					 palytime();
				 },3000);
			}
			
			
			img.onmouseenter = function(){
				clearInterval(timer);
			}
			img.onmouseleave = function(){
				times();
			}
		</script>
	</body>
</html>
